<template>
  <div
    class="ui-timeline-item"
  >
    <span class="ui-timeline-item__point"></span>
    <div class="ui-timeline-item__date">{{date}}</div>
    <div class="ui-timeline-item__content">
      <slot />
    </div>
  </div>
</template>
<script>
import { formatDate } from '@/utils/date'

export default {
  name: 'UiTimelineItem',
  props: {
    time: {
      type: [String, Number, Date]
    }
  },
  computed: {
    date() {
      return formatDate(this.time, 'HH:mm')
    }
  }
}
</script>
<style lang="less">
.ui-timeline-item{
  padding: 20px 0 20px 50px;
  position: relative;
  min-height: 28px;
  display: flex;
  flex-direction: row;
  &:after {
    content: '';
    position: absolute;
    left: 25px;
    top: 32px;
    bottom: -32px;
    width: 1px;
    background-color: #D5D8DC;
  }
  &:last-child{
    &:after {
      display: none;
    }
  }
}
.ui-timeline-item__point{
  position: absolute;
  left: 20px;
  top: 29px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #D5D8DC;
}
.ui-timeline-item__date{
  display: inline-block;
  height: 28px;
  line-height: 28px;
  width: 48px;
}
.ui-timeline-item__content{
  padding-left: 12px;
}
</style>
